<template>
	<view>
		<image src="../../../客服微信.jpg"></image>
	</view>
</template>

<script>
	import {commentList,goodInfo,createComment,likeComment,deleteComment,postLike,createBrowse,createFollow,deleteFollow} from '@/common/http.api.js'
	import config from '@/common/config.js'
	import jwt from '@/utils/jwt.js';
	import {mapState} from "vuex";
	import {timLogin} from '@/utils/tim.js'
	export default {
		data() {
			return {
				videoPlay: false,
				videoUrl: '',
				defAvatar: '',
				id:'',
				goodDate:{
					memberInfo:{
						avatar:'',
						settlement:{},
					}
				},
				isLogin:false,
				bgColor: '#ff5d50',
				statusBarHeight:10,
				isShowNav: false,
				commentData: null,
				showComment:false,
				reqFlag: false, // 请求标志，防止重复操作，true表示请求中
				goodInfotText:'',
				cameText:'',
				securedtransactionsText:'',
				peoplewantText:'',
				awesomeText:'',
				browseText:'',
				productidText:'',
				complaintText:'',
				recentreviewsText:'',
				sellerreplyText:'',
				settledText:'',
				allmessagesText:'',
				messageText:'',
				buynowText:'',
				haveachatText:'',
				locale:'',
				dayText:'',
				monthText:'',
				yearText:'',
				that:this,
				moneyText:'',
				loginactionText:'',
				subscribedText:'',
				unsubscribeText:'',
				comenterrorText:'',
				likedsuccessfullyText:'',
				pleasesigninText:'',
				frequentoperationText:'',
				hintText:'',
				pleaseloginfirstText:'',
				gotologinText:'',
				successfuloperationText:'',
			};
		},
		computed: {
			...mapState({
				timLogin: state => state.tim.timLogin,
				isSDKReady: state => state.tim.isSDKReady,
			})
		},
		watch: {
			isSDKReady(val) {
				
			},
		},
		filters:{
		  filterSettlement(val,that){
			  let text = '';
			  let year = val.year;
			  let month = val.month;
			  let day = val.day;
			  if(year > 0){
				  text = text + year + that.yearText;
			  }
			  if(month > 0){
			  	  text = text + month + that.monthText;
			  }
			  if(day > 0){
			  	 text = text + day + that.dayText;
			  }
			  return text;
		  }	
		},
		async onShow() {
			this.isLogin = jwt.getLogin();
			this.refresh();
			this.locale = this.$i18n.locale;
			if(this.isLogin){
				console.info("登陆tim")
				//await timLogin();
			}
		},
	 	async onLoad(e){
		   if(e.id){
			 this.id = e.id;
			 this.getGoodInfo();
		   }
		   if(jwt.getLogin()){
			   this.doCreateBrowse();
		   }
		   await this.$onLaunched;
		   this.initData();
		},
		//页面的生命周期
		onPageScroll(e) {
			if(e.scrollTop >= 30){
				this.isShowNav = true
			}else {
				this.isShowNav = false
			}
		},
		methods:{
			refresh(){
				this.moneyText = this.$t('common.money.text');
				this.goodInfotText = this.$t('good.info.text');
				this.securedtransactionsText = this.$t('good.securedtransactions.text');
				this.cameText = this.$t('good.came.text');
				this.peoplewantText = this.$t('good.peoplewant.text');
				this.awesomeText = this.$t('good.awesome.text');
				this.browseText = this.$t('good.browse.text');
				this.productidText = this.$t('good.productid.text');
				this.complaintText = this.$t('good.complaint.text');
				this.recentreviewsText = this.$t('good.recentreviews.text');
				this.sellerreplyText = this.$t('good.sellerreply.text');
				this.settledText = this.$t('good.settled.text');
				this.allmessagesText = this.$t('good.allmessages.text');
				this.messageText = this.$t('good.message.text');
				this.buynowText = this.$t('good.buynow.text');
				this.haveachatText = this.$t('good.haveachat.text');
				
				this.dayText = this.$t('common.day.text');
				this.monthText = this.$t('common.month.text');
				this.yearText = this.$t('common.year.text');
				
				this.loginactionText = this.$t('good.loginaction.text');
				this.subscribedText = this.$t('good.subscribed.text');
				this.unsubscribeText = this.$t('good.unsubscribe.text');
				this.comenterrorText = this.$t('good.comenterror.text');
				
				this.likedsuccessfullyText = this.$t('good.likedsuccessfully.text');
				this.pleasesigninText = this.$t('good.pleasesignin.text');
				this.frequentoperationText = this.$t('good.frequentoperation.text');
				this.hintText = this.$t('good.hint.text');
				this.pleaseloginfirstText = this.$t('good.pleaseloginfirst.text');
				this.gotologinText = this.$t('good.gotologin.text');
				this.successfuloperationText = this.$t('good.successfuloperation.text');
			},
			doPostLike(){
				let that = this;
				postLike({id:this.id}).then(res => {
						if (res.code === 0) {
							this.goodDate.hasFollow = true;
							this.$refs.uToast.show({
								message: that.likedsuccessfullyText,
								type: 'success',
							})
						} else {
							uni.hideLoading();
							this.$refs.uToast.show({
								message: res.msg,
								type: 'error',
							})
						}
					});
			},
			initData(){
				this.defAvatar = this.$store.state.$appInfo.defaultAvatar;
			},
			verifyLogin(){
				let that = this;
				let login = jwt.getLogin();
				if(!login){
					this.$refs.uToast.show({
						type: 'error',
						message: that.loginactionText,
						complete() {
							uni.navigateTo({
								url: 'pages/common/public/login_one'
							});
						}
					})
				}
				return login;
			},
			//选择用户聊天
			checkUserToRoom(toUserId) {
				let that = this;
				console.info('状态：' + that.isLogin + ' -- ' + that.isSDKReady);
				debugger
				if(that.isLogin){
					let goodInfo={
						id:that.goodDate.id,
						name:that.goodDate.name,
						img:that.goodDate.thumbnail,
						price:that.goodDate.price,
						merchantId:that.goodDate.memberId
					};
					console.info(goodInfo);
					let goodData = encodeURIComponent(JSON.stringify(goodInfo));
					uni.navigateTo({
						url: '/pages/common/chat/chat?conversationID=C2C' + toUserId + '&chatMode=1&goodData=' + goodData
					})
				}else{
					this.$refs.uToast.show({
						type: 'error',
						message: that.pleasesigninText,
						complete() {
							uni.navigateTo({
								url: 'pages/common/public/login_one'
							});
						}
					})
				}
			},
			showVideo(flag){
				this.videoPlay = flag;
			},
			// 触发全屏播放的点击事件
			videoShow(url) {
			  this.videoUrl = url;
			  this.videoPlay = true;  // 显示播放盒子
			},
			doCreateBrowse(){
				createBrowse({categoryId:0,oId:this.id}).then(res => {});
			},
			doCreateFollow(){
				let that = this;
				if(this.verifyLogin()){
					createFollow({categoryId:0,merchantId:this.goodDate.memberInfo.id}).then(res => {
						if (res.code === 0) {
							this.goodDate.hasFollow = true;
							this.$refs.uToast.show({
								message: that.subscribedText,
								type: 'success',
							})
						} else {
							uni.hideLoading();
							this.$refs.uToast.show({
								message: res.msg,
								type: 'error',
							})
						}
					});
				}
			},
			doDeleteFollow(){
				let that = this;
				if(this.verifyLogin()){
					const authToken = jwt.getAccessToken();
					deleteFollow({params:{id:this.goodDate.memberInfo.id},header: {'Authorization': authToken ? `Bearer ${authToken}` : ''}}).then(res => {
						if (res.code === 0) {
							this.goodDate.hasFollow = false;
							this.$refs.uToast.show({
								message: that.unsubscribeText,
								type: 'success',
							})
						} else {
							uni.hideLoading();
							this.$refs.uToast.show({
								message: res.msg,
								type: 'error',
							})
						}
					});
				}
			},
			goEvaluate(){
				uni.navigateTo({
					url: 'pages/common/good/evaluate?id='+this.id
				});
			},
			onShowComment(){
				this.showComment = true;
				this.getComment();
			},
			// 获取评论
			getComment() {
				let that = this;
				commentList({oId:this.id,categoryId:1}).then(res => {
					if (res.code === 0) {
						this.commentData = {
							"readNumer": res.data.readNumer,
							"commentSize": res.data.commentList ? res.data.commentList.length :0,
							"comment": res.data.commentList ? this.getTree(res.data.commentList) : [] 
						};
					} else {
						uni.hideLoading();
						this.$refs.uToast.show({
							message: that.comenterrorText,
							type: 'error',
						})
					}
				});
			},
			playing(e){
				let currentId = e.currentTarget.dataset.id
				// uni.createVideoContext获取视频上下文对象
				this.videoContent = uni.createVideoContext(currentId)
				console.log(currentId)
			},
			getGoodInfo(){
				let userId = jwt.getUserId();
				goodInfo({params: {id: this.id,memberId:userId,locale:this.locale}}).then(res => {
					if (res.code === 0) {
						this.goodDate = res.data;
						this.goodDate.memberInfo.age= this.goodDate.memberInfo.age ? parseInt(this.goodDate.memberInfo.age):0;
						this.goodDate.memberInfo.sex= this.goodDate.memberInfo.sex ? parseInt(this.goodDate.memberInfo.sex):1;
					} else {
						uni.hideLoading();
						this.$refs.uToast.show({
							message: res.msg,
							type: 'error',
						})
					}
				});
			},
			back(){
				uni.navigateBack({delta: 1});
			},
			onLike(index,postId){
				let that = this;
				if (!this.checkLogin()) {
					return
				}
				if (this.reqFlag) {
					this.$refs.uToast.show({
						message: that.frequentoperationText,
						type: 'error',
					})
					return
				}
				this.reqFlag = true;
				postLike({id:postId}).then(res => {
					if(res.code === 0 ){
						this.dynamicList[index].likes = this.dynamicList[index].likes + 1;
						this.dynamicList[index].hasLike = true;
					}
					this.reqFlag = false;
				}).catch(res => {
					this.reqFlag = false;
				})
			},
			onShowComment(id){
				this.showComment = true;
				this.$emit("popup", true);
				this.postId = id;
				this.getComment();
			},
			// 登录校验
			checkLogin() {
				let that = this;
				if (jwt.getLogin()) {
					return true;
				} else {
					uni.showModal({
						title: that.hintText,
						content: that.pleaseloginfirstText,
						confirmText: that.gotologinText,
						success: function(res) {
							if (res.confirm) {
								uni.redirectTo({
									url: '/pages/common/public/login_one'
								});
							}
						}
					});
					return false;
				}
			},
			// 输入框聚焦
			focusOn() {
				this.checkLogin();
			},
			// 获取评论
			getComment() {
				let that = this;
				commentList({oId:this.id,categoryId:1}).then(res => {
					if (res.code === 0) {
						this.commentData = {
							"readNumer": res.data.readNumer,
							"commentSize": res.data.commentList ? res.data.commentList.length :0,
							"comment": res.data.commentList ? this.getTree(res.data.commentList) : [] 
						};
					} else {
						uni.hideLoading();
						this.$refs.uToast.show({
							message: that.comenterrorText,
							type: 'error',
						})
					}
				});
			},
			close(){
				this.showComment = false;
				this.$emit("popup", false);
			},
			// 新增评论
			add(req) {
				let that = this;
				if (!this.checkLogin()) {
					return
				}
				if (this.reqFlag) {
					this.$refs.uToast.show({
						message: that.frequentoperationText,
						type: 'error',
					})
					return
				}
				this.reqFlag = true;
				let params = {
					oId: this.id,
					parentId: req.pId,
					categoryId:1,
					content: req.content
				}
				createComment(params).then(res => {
					this.$refs.uToast.show({
						message: that.successfuloperationText,
						type: 'success',
					})
					this.$refs.goShopComment.addComplete();
					this.getComment();
					this.getGoodInfo();
					this.reqFlag = false;
				}).catch(res => {
					this.reqFlag = false;
				})
			},
			// 点赞评论
			like(commentId) {
				let that = this;
				if (!this.checkLogin()) {
					return
				}
				if (this.reqFlag) {
					this.$refs.uToast.show({
						message: that.frequentoperationText,
						type: 'error',
					})
					return
				}
				this.reqFlag = true;
				likeComment({id:commentId}).then(res => {
					this.$refs.goShopComment.likeComplete(commentId);
					this.reqFlag = false;
				}).catch(res => {
					this.reqFlag = false;
				})
			},
			// 删除评论
			del(commentId) {
				let that = this;
				if (!this.checkLogin()) {
					return
				}
				if (this.reqFlag) {
					this.$refs.uToast.show({
						message: that.frequentoperationText,
						type: 'error',
					})
					return
				}
				this.reqFlag = true;
				deleteComment({id:commentId}).then(res => {
					this.reqFlag = false;
					this.$refs.goShopComment.deleteComplete(commentId);
					this.getGoodInfo();
				}).catch(res => {
					this.reqFlag = false;
				})
			},
			// 列表按照父子转换成树
			getTree(data) {
				let result = [];
				let map = {};
				data.forEach(item => {
					map[item.id] = item;
				});
				data.forEach(item => {
					let parent = map[item.parentId];
					if (parent) {
						(parent.children || (parent.children = [])).push(item);
					} else {
						result.push(item);
					}
				});
				return result;
			}
		}
	}
</script>

<style lang="scss">
.goshop-info-back{
	padding:20rpx 20rpx 0 20rpx;
}
.goshop-info-container{
	.goshop-info-navbar{
		background-color: $goshop-color-auxiliary-one;
	}
	.goshop-info-box{
			padding-bottom: 140rpx;
			//padding: 20rpx;
			.goshop-info-user{
				padding: 0 20rpx;
				background-color: $goshop-color-auxiliary-one;
				.goshop-info-user-center{
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 140rpx;
					border-bottom: 2px solid $goshop-text-color-four;
					
					.goshop-info-user-avatar-wrap{
						//flex: 1;
					}
					.goshop-info-user-box{
						flex: 3;
						padding-left: 20rpx;
						.goshop-info-user-box-head{
							display: flex;
							justify-content: flex-start;
							align-items: center;
							.goshop-info-user-name{
								display: flex;
							}
							.goshop-level-box{
								flex: 3;
							}
							.goshop-info-user-following{
								display: flex;
								align-items: center;
								.goshop-info-user-following-img{
									width: 100rpx;
									height: 40rpx;
								}
							}
					
						}
						.goshop-info-user-box-body{
							
						}
						.goshop-info-user-box-footer{
							
						}
					}
				}
			}
			.goshop-info-content{
				padding: 0 20rpx;
				background-color: $goshop-color-auxiliary-one;
			}
			.goshop-info-footer{
				background-color: $goshop-color-auxiliary-one;
				border-top: 2rpx solid $goshop-text-color-four;
				.goshop-info-footer-wrap{
					padding: 20rpx 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 10px;
					.goshop-info-footer-left{
						display: flex;
						justify-content: center;
						align-items: center;						
					}
					.goshop-info-footer-center{
						flex: 3;
						display: flex;
						justify-content: flex-end;
					}
				}
			}	
	}
	.goshop-info-action{
		background-color: $goshop-color-auxiliary-one;
		display: flex;
		padding: 10rpx;
		justify-content: space-between;
		border-top: 2px solid $goshop-text-color-four;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		.goshop-info-action-box{
			width: 96rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		.goshop-info-action-right{
			display: flex;
			align-items: center;
			.goshop-info-action-right-buy{
				background: linear-gradient(rgba(255,198,0,255) 2.718%,rgba(255,131,0,255) 98.628%);
				border-radius: 25px 0px 0px 25px;
				width: 96px;
				height: 70rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.goshop-info-action-right-chat{
				background: linear-gradient(rgba(255,2,2,255) 0%,rgba(218,2,2,161) 100%);
				border-radius:  0px 25px 25px 0px ;
				//transform: rotate(-180.00deg);
				width: 96px;
				height: 70rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
}
.goshop-info-evaluate{
	background-color: $goshop-color-auxiliary-one;
	padding: 20rpx;
	margin-top: 20rpx;
	.goshop-info-evaluate-head{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.goshop-info-evaluate-body{
		display: flex;
		.goshop-info-evaluate-body-scroll{
			    white-space: nowrap;
				width: 100%;
				.goshop-info-evaluate-content-item{
					display: inline-block;
					.goshop-info-evaluate-content{
						margin-top: 20rpx;
						background-color: $goshop-text-color-four;
						width: 500rpx;
						height: 200rpx;
						display: flex;
						padding: 20rpx;
						margin-right: 20rpx;
						.goshop-info-evaluate-left{
						   display: flex;
						   align-items: center;
						   flex-direction: column;
						}
						.goshop-info-evaluate-right{
							flex: 3;
							display: flex;
							flex-direction: column;
							padding-left: 20rpx;
							.goshop-info-evaluate-right-head{
								display: flex;
							}
						}
					}
				}
		}
	}
}
.goshop-info-center-wrap{
	margin-top: 20rpx;
	background-color: $goshop-color-auxiliary-one;
	padding: 20rpx;
	.goshop-info-center{
		padding: 0 20rpx;
		.goshop-info-center-box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 140rpx;
		}
		.goshop-info-center-avatar-wrap{
			//flex: 1;
		}
		.goshop-info-center-right{
			flex: 3;
			padding-left: 20rpx;
			.goshop-info-center-box-head{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				.goshop-info-center-name{
					display: flex;
				}
				.goshop-info-center-level{
					display: flex;
					align-items: center;
					.goshop-info-center-level-img{
						width: 100rpx;
						height: 40rpx;
					}
				}
		
			}
			.goshop-info-center-box-body{
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.goshop-info-center-box-footer{
				
			}
		}
	}
}
.goshop-info-message{
	margin-top: 20rpx;
	background-color: $goshop-color-auxiliary-one;
	.goshop-info-message-title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		border-top: 2rpx solid $goshop-text-color-four;
		border-bottom: 2rpx solid $goshop-text-color-four;
	}
	.goshop-info-message-list{
		padding: 20rpx;
		display: flex;
		.goshop-info-message-right{
			flex: 3;
			display: flex;
			flex-direction: column;
			.goshop-info-message-right-box{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-left: 20rpx;
				.goshop-info-message-right-box-user{
					display: flex;
				}
			}
			.goshop-info-message-content{
				padding-left: 30rpx;
				.goshop-info-message-content-box{
					border-bottom: 2rpx solid $goshop-text-color-four;
				}
			}
		}
	}
}
</style>
